<{include file="top_v2.html" }>
<style>
    .hide{ display: none;}
</style>
</head>
<body>

<div id="wrap" class="pt pb active-page">
    <div class="header">
        活动详情
        <a href="<{u('index')}>" class="back"></a>
    </div>
    <div class="img-box">
        <img src="<{$preuploadcurl}><{$info.imgList}>" alt="" />
        <p><{$info.title}></p>
    </div>


    <{if $info.showPay or $info.point}>
    <div class="section section-1">
        <{if $info.showPay}>
        <p><label class="icon-1">所需费用:</label><em><{$info.showPay}></em></p>
        <{/if}>
        <{if $info.point}>
        <p><label class="icon-2">所需积分:</label><em><{$info.point}></em>积分</p>
        <{/if}>
    </div>
    <{/if}>


    <div class="section section-1">
        <p><label class="icon-1">活动名额:</label><em><{if $info.places == 0}>不限<{else}><{$info.places}><{/if}></em>(<{$info.placesUnit|default:"组"}>)</p>
        <p><label class="icon-2">报名截至:</label><em><{$info.applyEndTime|date_format:"%Y-%m-%d %H:%M"}></em></p>
    </div>

    <div class="section section-2">
        <p><label class="icon-3">活动时间:</label><{$info.showListTime}></p>
        <p style="height: auto; min-height: 0.98rem;  line-height: 0.68rem;"><label class="icon-4">活动地址:</label><{$info.location}></p>
    </div>


    <div class="section section-3">
        <{if $info.joinMemberBeCount>0}>
        <div class="block">
            <div class="title">已有<em><{$info.joinMemberBeCount}></em>人入选</div>
            <a href="<{u('events/applylog')}>&type=2&id=<{$info.id}>" class="avatars">

                <{foreach from=$info.joinMemberBe item=item key=key}>
                    <{if $key < 5}>
                    <img class="uhead" src="<{$item.uid|headpic}>" alt="" />
                    <{/if}>
                <{/foreach}>
                <span class="more"></span>
            </a>
        </div>
        <{/if}>

        <{if $info.applyCount>0}>
        <div class="block">
            <div class="title">已有<em><{$info.applyCount}></em>人报名</div>
            <a href="<{u('events/applylog')}>&type=1&id=<{$info.id}>" class="avatars">
                <{foreach from=$info.joinMember item=item key=key}>
                <{if $key < 5}>
                <img class="uhead" src="<{$item.uid|headpic}>" />
                <{/if}>
                <{/foreach}>
                <span class="more"></span>
            </a>
        </div>
        <{/if}>
    </div>
    <{if count($photo) gt 0}>
        <div class="section section-3">
            <div class="block">
                <div class="title">活动相册</div>
                <a href="<{u('events/allPhoto')}>" class="avatars">
                    <{foreach from=$photo item=item }>
                        <img class="uhead" src="<{$item}>" alt="" />
                    <{/foreach}>
                    <span class="more"></span>
                </a>
            </div>
        </div>
    <{/if}>




    <div class="section section-4">
        <div class="title">活动详情</div>
        <div class="content"><{$info.content}></div>
    </div>

<{* ----------作业---------- *}>
<{if $tasks}>
    <div class="section section-5">
        <div class="title">小伙伴们的分享(<{count($tasks)}>)</div>
        <div class="message-list">
            <{foreach from=$tasks item=item key=key}>
            <div class="message-box">
                <div class="user">
                    <span class="avatar"><img src="<{$item.uid|headpic}>" alt="" /></span>
                    <span class="nickname"><{$item.nickname}></span>
                    <!--<a href="javascript:void(0);" class="like">10</a>-->
                </div>
                <p class="publish"><{$item.addTime|date_format:"%Y-%m-%d %H:%M"}></p>
                <p class="des"><{$item.content}></p>
                <{if $item.imgList}>
                <div class="photo-box clearfix">
                    <{foreach from=$item.imgList item=list key=k}>
                    <a href="javascript:void(0);" class="img-box" style="background: url(<{$list}>) no-repeat;"></a>
                    <{/foreach}>
                </div>
                <{/if}>
            </div>
            <{/foreach}>

        </div>
        <a href="javascript:void(0);" class="packup">点击收起详情</a>
    </div>
<{/if}>




<{* ----------评论---------- *}>
    <div class="section section-6">
        <div class="title">其他小伙伴们说(<{$info.commentNum}>)</div>
        <{if $info.commentNum gt 0}>
        <div class="message-list" id="commentList">

        </div>
        <{else}>
        <!--还没有任何评论-->
        <div class="empty">
            <img src="<{$preStaticUrl}>Wap/v2/img/empty.png" alt="" />
            <p>还没有任何评论</p>
        </div>
        <{/if}>
    </div>
    <form id="commentForm">
    <div class="footer" style="text-align: center;">
        <input type="hidden" name="id" value="<{$info.id}>" />
        <input type="hidden" name="type" value="<{$smarty.const.OBJ_TYPE_ACTIVITY}>" />
        <input type="hidden" name="parentID" value="0" id="parentID" />
        <input type="hidden" id="nickname" value="" />
        <textarea placeholder="添加一条评论" id="commentInput" style="display: none;" maxlength="200" name="content"></textarea>
        <span>
            <a href="javascript:void(0)"   id="msgBtn">去留言</a>
        <{if $info.joinStatus}>
            <{if $info.isPay == 0}>
                <{if $info.joinStatus eq $JOIN_STATUS_APPLY}>
                    <a href="javascript:void(0)"  class="signup" onclick="uploadShare()">提高入选率</a>
                <{else}>
                    <a href="javascript:void(0)"  class="signup"><{$info.joinStatusHtml}></a>
                <{/if}>

            <{else}>
                <{if isset($info.payUrl)}>
                    <a href="<{$info.payUrl}>" class="signup"><{$info.joinStatusHtml}></a>
                <{else}>
                    <a href="javascript:void(0)" class="signup"><{$info.joinStatusHtml}></a>
                <{/if}>
            <{/if}>
        <{else}>
            <{if $info.applyEndTime>$smarty.now}>
                <{if $info.model == 'first' && $info.applyCount>=$info.places}>
                    <a href="javascript:void(0)" class="signup">报名已结束</a>
                <{else}>
                    <{if $info.applyStartTime>$smarty.now }>
                    <a href="javascript:void(0)" class="signup">即将开始</a>
                    <{else}>
                    <a class="signup" href="<{if $info.jumpMode eq 2}><{$info.jumpURL}><{else}><{u('events/apply')}>&id=<{$info.id}><{/if}>" onclick="checkTask(this,'<{$info.id}>');return false">去报名</a>
                    <{/if}>
                <{/if}>
            <{else}>
                    <a href="javascript:void(0)" class="signup">报名已结束</a>
            <{/if}>
        <{/if}>
            <a href="javascript:void(0)"  style="display: none;" id="send">发送</a>
        </span>
    </div>
    </form>


    <!--关注弹窗-->
    <div id="mustFollow" class="pop pop-attention">
        <div class="pop-container">
            <a href="javascript:void(0);" class="pop-close close"></a>
            <div class="pop-header">请关注丸子妈妈</div>
            <div class="pop-content">
                <img src="<{$preStaticUrl}>Wap/images/<{$qrcode_path}>" alt="" class="qrcode"/>
                <p>活动链接分享朋友圈、优质留言<br />可增加活动入选几率！</p>
                <div class="btn-group">
                    <a href="javascript:void(0);" class="close">知道了</a>
                </div>
            </div>
        </div>
    </div>

    <!--上传分享-->
    <div id="uploadShare" class="pop pop-attention" >
        <div class="pop-container">
             <a href="javascript:void(0);" class="pop-close close" ></a>
            <div class="pop-header">上传分享图片</div>
            <div class="pop-content">
                <div id="imgc">
                <{if $info.sharePic}>
                    <img id="shareImg" src="<{$info.sharePic}>" class="qrcode" />
                <{else}>
                    <div style="color: #d3d3d3;background-color:#f3f3f3; font-size: 0.3em;  line-height: 3.8rem;  border: 1px solid gray;   border-radius: 1em;}" class="qrcode">还未上传分享图片</div>
                <{/if}>
                </div>
                <p style="font-size: 0.3rem">将活动分享朋友圈并上传截图<br />可提高入选几率！</p>
                <div class="btn-group">
                    <a href="javascript:void(0);" onclick="doUpload()">上传图片</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


<script src="<{$preStaticUrl}>Wap/js/jquery.lazyload.js?v=<{$resVersion}>"></script>
<script type="text/javascript">
    function uploadShare(){
        showPop('#uploadShare');
    }

    function doUpload() {
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                wx.uploadImage({
                    localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        $.post("<{u('uploadShareImgId')}>",{'eid':'<{$info.id}>','media':serverId},function (ret) {
                            if(ret.status==0){
                                $('#imgc').html("<img id='shareImg' src='"+ret.pic+"' class='qrcode' />");
                            }
                            tip(ret.msg);
                        },'json');
                    }
                });

            }
        });
    }


    $(document).ready(function(){
        $("img.lazy").lazyload();
        $('#msgBtn').click(function(){
            switchSendMenu(true)
        });

        $(".packup").click(function(){
            var dom = $(this).prev()
            dom.toggle()
            var txt = dom.css("display") == "none"?"点击展开详情":"点击收起详情"
            $(this).text(txt)
        })
    });

    var showPop = function(el){
        var pop = $(el).find(".pop-container");
        $(el).show();
        var h = $(pop).height()
        $(pop).css({
            'margin-top': -h/2
        })
    }

    function checkTask(e,i){
        <{if $askFollow eq 1}>
            showPop('#mustFollow');
            return false;
        <{/if}>

        var param = {id:i};
        $.ajax({
            url:"<{U('Events/checkUserTask')}>",
            type:'get',
            data:param,
            dataType:'JSON',
            success:function(data) {
                if (data.status == 1) {
                    tip(data.msg);
                    return false;
                } else if (data.status == 2) {
                    var len = data.data.length;
                    for (var i = 0; i < len; i++) {
                        tip("您的“" + data.data[i] + "”活动作业未提交，请先提交作业");
                    }
                    return false;
                } else {
                    var url = $(e).attr("href");
                    window.location.href = url;
                    return true;
                }
            },
            error:function (e) {
                tip("登陆过期，重新登陆",function(){
                    location.href="<{$LOGIN_URL}>backurl=" + encodeURIComponent(location.href);
                },3);
            }
        });
    }


    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                    elem.addEventListener ?
                            elem.addEventListener(type, callback, false) :
                            elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                    var val = elem.currentStyle[name];

                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                                parseFloat(getStyle('paddingTop')) -
                                parseFloat(getStyle('paddingBottom')) + 'px';
                    };

                    return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'))+10.4;

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                    padding = 0,
                    style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                //document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

    var infoShowFlag = 1;
    var GETCOMMENTDEFAULTLISTRUI = "<{U('Comment/loadMore')}>&type=<{$smarty.const.OBJ_TYPE_ACTIVITY}>&id=<{$info.id}>&pageSize=8";

    var page        = 1;
    var timeOutEvent=0;
    var hasNext=true;
    var isLoading=false;
    $(function(){
        var text = document.getElementById("commentInput");
        autoTextarea(text);// 调用

        loadMoreComment();



        function loadMoreComment(){
            if (isLoading)return false;
            isLoading=true;
            $.getJSON(GETCOMMENTDEFAULTLISTRUI, {page: page}, function(data){
                isLoading=false;
                if(data.status!=0){
                    if (page<=1) {
                        $(".empty").show();
                        $('#commentList').hide();
                    }else{
                        tip("数据获取失败，请稍后重试或联系管理员解决！");
                    }
                    return false;
                }else{
                    if(data.isPage==0)hasNext=false;
                    page++;
                    if(data.dataHTML.length>0){
                        $("#commentList").show().append(data.dataHTML).find('.message-box').off().on({
                            touchstart: function(e){
                                timeOutEvent = setTimeout(function(){longPress(e)},500);
                                //e.preventDefault();
                            },
                            touchmove: function(){
                                clearTimeout(timeOutEvent);
                                timeOutEvent = 0;
                            },
                            touchend: function(e){
                                clearTimeout(timeOutEvent);
                                if(timeOutEvent!=0){
                                    switchSendMenu(false);
                                }
                            }
                        })
                        $(".empty").hide();
                    }else{
                        $(".empty").show();
                        $('#commentList').hide();
                    }
                }
            });
        }





        function longPress(e){
            console.log(e.target);
            //return;
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
            commentSelect($(e.target).parents('.message-box'));
        }


        $(window).scroll(function() {
            if(!hasNext)return false;//没有下一页就跳出
            if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 10) {
                //当前要加载的页码
                loadMoreComment();
            }
        });

        var isPostComment=false;
        $("#send").on('click',function(){
            if(isPostComment){return false;}
            if($("#commentInput").val() == null || $("#commentInput").val() == "" ){
                return;
            }
            var data=$("#commentForm").serialize();

            isPostComment=true;
            $.post("<{u('Comment/addComment')}>",data,function(result){
                isPostComment=false;
                if(result.status == 1){
                    tip(result.msg);
                    return false;
                }else if(result.status == 99){
                    window.location.href = result.uri;
                }else {
                    document.getElementById('commentForm').reset();
                    if(typeof result.tip!='undefined'){
                        tip(result.tip,function(){location.reload()});
                    }else{
                        tip("评论成功",function(){location.reload()});
                    }
                }
            },'json')
        });

        $('.section-5,.section-4,.section-3,.section-2,.section-1').click(function(){switchSendMenu(false)});
        $('#commentInput').on('focus',function(){
            switchSendMenu(true);
        });
    });

    function commentSelect($obj){
        switchSendMenu(true);
        //var $obj=$(obj);
        $("#parentID").val($obj.attr('data-id'));
        if($("#nickname").val() == $obj.attr('data-nick')){
            return false;
        }
        $("#nickname").val($obj.attr('data-nick'));
        var $comment=$("#commentInput");
        $comment.val($comment.val().replace(/@(.*): /, ''));
        $comment.val('@'+$obj.attr('data-nick')+': '+$comment.val());
        $comment[0].focus();

    }

    function switchSendMenu(flag){
        if(flag){
            $('#commentInput,#send').show();
            $('.signup,#msgBtn').hide();
        }else {
            $('#commentInput,#send').hide();
            $('.signup,#msgBtn').show();
        }
    }

    function scrollToEnd(){
        document.body.scrollTop = document.body.scrollHeight;
    }


</script>